<template>
     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="hobby" label="#" width="180">
      </el-table-column>
     <el-table-column prop="motto" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="date" label="头像" width="180">
        <template #default="scope" > 
          <img :src="scope.row.headImg" alt="" class="imgs">
        </template>
     </el-table-column>

      <el-table-column prop="userName" label="座右铭" width="180">
      </el-table-column>

      <el-table-column prop="workUrl" label="地址">
      </el-table-column>

    </el-table>
   

    <pageBox :total="total" :pageData="getdata" @pageSizeChange="pageSizeChange" @pageChange="pageChange"/>
</template>

<script lang="ts">
import { getPageData } from '@/api/userInfo'
import { scrollIntoView } from 'element-plus/es/utils/index.mjs';
import pageBox from '@/componend/pageBox.vue';
export default {
  components:{
     pageBox
  },
  data() {
    return {
      tableData:[

      ],
     total:0,
      getdata:{
        page:1,
        pageSize:10
      }
    }
  },
  created(){
     this.getData()
  },
  methods:{
    getData(){
      getPageData(this.getdata as any).then(res=>{
        console.log(res);
        
         this.tableData = res.data.rows
         this.total = res.data.total
      })
    },
    pageSizeChange(pageSize:number){
       this.getdata.pageSize = pageSize
       this.getdata.page = 1
       this.getData()
    },
    pageChange(page:number){
         this.getdata.page = page
         this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.imgs{
  width: 50px;
  height: 50px;
}
 .ul-box{
        display: flex;
        
        li{
            text-align: center;
            list-style: none;
            padding: 5px;
            margin: 5px;
              color: #fff;
               background-color: black;
               height: 20px;
               cursor:grab;
        }
        .active{
            color: rgb(255, 0, 0);
        }
    }
</style>
